<template>
	<view class="notifaction">
		
			
			<view class="">
				<!--已加圈子列表-->
				<view class="none" v-if="notifaction.err == 1">
					暂时没有通知喔~_~
				</view>
				<view  v-else>
					<!-- 按组使用 -->
					<uni-swipe-action>
						<view class="content-box">
							<view class="unread" v-if="unread.err !== 1 ">
								<view class="total-unread">{{unread.length}}条未读通知</view>
								<view class="clear-unread" @tap="clearNotice">
									<image src="/static/images/user/note_clear.svg" mode=""></image>
									清扫未读
								</view>
							</view>
					    <uni-swipe-action-item :right-options="options2"  @change="swipeChange($event, index)" v-for="(item,index) in notifaction" :key="index"  @click="swipeClick($event, item)">
								<view class="circle-item tui-news-flex" >
									<view class="tui-news-picbox" v-if="item.avatar" @tap.stop="gouserhp(item.data.user.id)">
											<image :src="item.avatar"></image>  
									</view>
									<view class="tui-news-picbox" @tap.stop="gouserhp(item.data.user.id)" v-else>
											<image :src="item.avatar"></image>  
									</view>
									
									<view class="center" @tap.stop="goDetail(item)">
										<view class="tui-news-tbox tui-flex-column tui-flex-between" >
											
											<view class="event" >
												
												<view class="left">
													<view class="name" @tap.stop="gouserhp(item.data.user.id)">{{item.data.user.name}}</view>
													<view :class="item.type == 'App\\Notifications\\System' ?'system-notice': 'body'">{{item.data.body}}</view>
												</view>
												<view class="right" >
													<view class="time">
														{{item.time}}
													</view>
													<view class="isread" v-if="!item.read_at">
														<image src="/static/images/notifaction/unread-icon.svg" mode=""></image>
													</view>
												</view>
												
											</view>
											
											<view class="reason" v-if="item.data.parent">	
												<view class="q-content">
													<text class="q-name">{{item.data.parent.user.name}}:</text>
													<view class="q-body">{{item.data.parent.body}}</view>
												</view>
											</view>
										</view>
									</view>
									
								</view>
					    </uni-swipe-action-item>
						</view>
					</uni-swipe-action>
					
					
				</view>
			</view>
			
		
		</view>
	</view>
</template>

<script>
	import api from '../../../common/api.js'
	export default {
		data() {
			return {
				notifaction:[],
				otheruser:[],
				unread:'',
				show: false,
				isOpened: 'none',
				options2: [
					/* {
						text: '标记已读',
						style: {
							backgroundColor: '#007aff'
						}
					}, */
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				swipeList: [],
				
			}
		},
		
		async onLoad() {
			await this.getUnread()
			await this.GetNotifaction()
		},
		
		methods:{
			
			setOpened() {//滑动条
				if (this.isOpened === 'none') {
					this.isOpened = 'left';
					return;
				}
				if (this.isOpened === 'left') {
					this.isOpened = 'right';
					return;
				}
				if (this.isOpened === 'right') {
					this.isOpened = 'none';
					return;
				}
			},
			
			change(e) {
				this.isOpened = e;
				console.log('返回：', e);
			},
			
			swipeChange(e, index) {
/* 				console.log('返回：', e);
				console.log('当前索引：', index); */
			},
			
			async swipeClick(e, item) {
				console.log(item);
				let {content} = e;
				let _self = this
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: (res) => {
							if (res.confirm) {
							  this.deleteSingleNotice(item.id)
							  // api.DeleteSingleNotice(id);
							  // api.GetNotifaction()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else {
					await api.Read(item.id)
					this.GetNotifaction()
				}
			},
			
			async clearNotice() {
				await api.ReadAll()
				await this.GetNotifaction()
				await this.getUnread()
			},
			
			async deleteSingleNotice(id) {//删除单条通知
				let res = await api.DeleteSingleNotice(id);
				await this.GetNotifaction()
				console.log(res);	
			},
			
			async getUnread() {//未读通知条数
				this.unread = await api.GetUnRead() 
				console.log(this.unread);
			},	
				
			async GetNotifaction() {//获取通知列表数据
				this.notifaction = await api.GetNotifaction()
				console.log(this.notifaction);	
			},
			
			gouserhp(uid) {//跳转到用户主页
				
				uni.navigateTo({
					url:'/pages/user/comps/my?id='+uid
				})
			},
			
			async goDetail(item) {//标记已读---跳转到对应的通知事件详情
				if(!item.read_at) {
					await api.Read(item.id)
					await this.GetNotifaction()
				}
				if(item.data.url && item.data.url !== '') {
					if(item.data.url == '/pages/user/comps/setup') {
						uni.navigateTo({
							url:item.data.url
						})
					}else {
						uni.navigateTo({
							url:item.data.url+'?qid='+item.data.parent.id
						})
					}
					
				}
			},
		},
		
		async onPullDownRefresh() {//下拉刷新
			await this.GetNotifaction()
			await this.getUnread()
			uni.stopPullDownRefresh()
		}
		
	}
</script>

<style lang="scss" >
page {
	background: #fff;
}
.content-box {
	flex: 1;
	height: 100vh;
	position: relative;
	background-color: #fff;
	border-bottom-color: #F3F6F5;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
.unread {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 26rpx;
	height: 100rpx;
	background: #F3F6F5;
	font-size: 30rpx;
	color: #B5B5B5;
	.clear-unread {
		display: flex;
		align-items: center;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
}
.circle-item {
	
	border-bottom: 1rpx solid #F3F6F5;
}
.tui-news-flex {
	display: flex;
	width: 750rpx;
	box-sizing: border-box;
	padding: 15rpx 22rpx;
}
.tui-news-picbox {
	display: flex;
	position: relative;
	image {
		width: 85rpx;
		height: 85rpx;
		border-radius: 50%;
	}
}

.tui-flex-column {
	flex-direction: column !important;
}
.tui-flex-between {
	justify-content: space-between !important;
}



.center {
	display: flex;
	align-items: center;
	// width: 480rpx;
	margin-left: 10rpx;
	font-size: 28rpx;
	.event {
		display: flex;	
		justify-content: space-around;
		margin-left: 12rpx;
		.left {
			.name {
				// width: 120rpx;
				display: inline-block;
				height: 35rpx;
				color: #576A94;
				font-weight: 700;
			}
			.body {
				width: 460rpx;
				font-size: 26rpx;
				padding: 6rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: 	wrap;
				color: #000000;
			}
			.system-notice {
				width: 460rpx;
				font-size: 26rpx;
			}
		}
		
	}
	.reason {
		width: 495rpx;
		margin: 8rpx 0;
		background-color: rgba($color: #e3e3e3, $alpha: 0.5);
		border-radius: 10rpx;
		overflow: hidden;
		.q-content {
			display: flex;
			// align-items: center;
			padding: 4rpx 14rpx;
			color: #4D6088;
			font-size: 28rpx;
			overflow: hidden;
			.q-name {
				padding: 10rpx 6rpx;
			}
			.q-body {
				display: -webkit-box;
				// width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				box-sizing: content-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				margin-left: 10rpx;
				margin: 10rpx 0;
				word-break: break-all;
				color: #a6a6a6;
				
				
			/* 	overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical; */
			}
		}
	}
	
}
.right {
	display: flex;
	width: 180rpx;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 26rpx;
	color: #a6a6a6;
	.isread {
		
		image {
			width: 45rpx;
			height: 16rpx;
		}
	}
}
.none {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	padding: 50rpx;
	font-size: 32rpx;
	color: #A7AAB5;
}
</style>
